<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span>车辆详情</span>
        <el-button @click="pageReturn">返回</el-button>
      </div>
      <div class="top-card">
        <!--        <el-image src="" style="width: 100px; height: 100px"></el-image>-->
        <div class="top-card-right">
          <div style="
              font-size: 16px;
              display: flex;
              justify-content: space-between;
            ">
            <div>
              <span style="font-weight: 600">车架号：</span><span>{{ detailForm.vinNo }}</span>
            </div>
            <div>
              <span style="font-weight: 600">车辆状态：</span><span>
                {{
                selectDictLabel(
                    dict.type.car_business_type,
                    detailForm.businessType
                )
              }}</span>
            </div>
          </div>
          <div>
            <span>品牌/车型/车款：</span>
            <span>{{
                `${detailForm.brandName ? detailForm.brandName : ""}${
                    detailForm.seriesName ? detailForm.seriesName + "/" : ""
                }${detailForm.modelName ? detailForm.modelName + "/" : ""}`
              }}</span>
          </div>
          <div>
            <span>车辆归属：</span><span>{{ detailForm.ascription }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="年检信息" name="njxx">
        <el-form :model="detailForm" v-if="isForm" class="el-form">
          <el-card class="box-card">
            <div slot="header" class="header-card">
              <span class="header-card-title">车辆信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="车架号:">
                  <span>{{ detailForm.vinNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车牌号:">
                  <span>{{ detailForm.carNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="品牌/车型/车款:">
                  <span>{{
                      `${detailForm.brandName ? detailForm.brandName : ""}${
                          detailForm.seriesName ? detailForm.seriesName + "/" : ""
                      }${detailForm.modelName ? detailForm.modelName + "/" : ""}`
                    }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="车辆产权:">
                  <span>{{ detailForm.propertyRightName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车辆归属:">
                  <span>{{ detailForm.ascription }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单编号:">
                  <span>{{ detailForm.orderCode }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="客户名称:">
                  <span>{{ detailForm.customerName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品类型:">
                  <span>{{
                      selectDictLabel(dict.type.contract_type, detailForm.contractType)
                    }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车辆性质:">
                  <span>{{
                      selectDictLabel(dict.type.car_nature, detailForm.carNature)
                    }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="车辆状态:">
                  <span>{{ selectDictLabel(dict.type.car_business_type, detailForm.businessType) }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="车辆登记日:">
                  <span>{{ detailForm.registerTime }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="座位数:">
                  <span>{{ detailForm.seatNum}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="燃油类型:">
                  <span>{{ selectDictLabel(dict.type.fuel_type, detailForm.fuelType) }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="年检线上或线下:">
                  <span> {{ selectDictLabel(dict.type.online_offline, detailForm.lastOnlineOffline) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="上次年检到期日:">
                  <span>{{ detailForm.inspectionLastTime }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header" class="header-card">
              <span class="header-card-title">年检信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="本次年检时间:">
                  <span>{{ detailForm.inspectionTime }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="本次年检线上/线下:">
                  <span v-if="detailForm.onlineOffline === '1'">线上</span>
                  <span v-if="detailForm.onlineOffline === '2'">线下</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预计下次年检到期日:">
                  <span>{{ detailForm.inspectionNextTime }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="预计下次年检线上/线下:">
                  <span v-if="detailForm.expireOnlineOffline === '1'">线上</span>
                  <span v-if="detailForm.expireOnlineOffline === '2'">线下</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="年检费:">
                  <span>{{ detailForm.inspectionPrice }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="年检待办费:">
                  <span>{{ detailForm.inspectionAgentPrice }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="综合测算费:">
                  <span>{{ detailForm.comprehensivePrice }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="二维费用:">
                  <span>{{ detailForm.twoDimensionPrice }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="其他费用:">
                  <span>{{ detailForm.otherPrice }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="年检总金额:">
                  <span>{{ detailForm.inspectionAllPrice }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col>
                <el-form-item label="年检标识:">
                  <ImageCommon v-model="detailForm.inspectionIdenUrl" :disabled="true"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col>
                <el-form-item label="年检发票:">
                  <ImageCommon v-model="detailForm.inspectionInvoiceUrl" :disabled="true"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col>
                <el-form-item label="年检备注:">
                  <span>{{ detailForm.remark }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="box-card">
            <div slot="header" class="header-card">
              <span class="header-card-title">财务报销信息</span>
            </div>
            <el-row :gutter="20">
              <el-col>
                <el-form-item label="付款凭证:"></el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="年检记录" name="njjl">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form>
                <el-form-item label="年检总次数:">
                  <span>{{ form.totalCount }}</span>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column label="操作"  align="center" width="100">
                  <template #default="{row}">
                    <el-button type="text" @click="handleRoute(row)">查看</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="inspectionTime" align="center" show-overflow-tooltip min-width="100"
                                 label="本次年检时间">
                  <template slot-scope="{row}">
                    {{ row.inspectionTime ? $dayjs(row.inspectionTime).format('YYYY-MM-DD') : '' }}
                  </template>
                </el-table-column>
                <el-table-column prop="onlineOffline" align="center" show-overflow-tooltip min-width="100"
                                 label="线上/线下">
                  <template #default="{row}">
                    <span v-if="row.onlineOffline == 1">线上</span>
                    <span v-if="row.onlineOffline == 2">线下</span>
                  </template>
                </el-table-column>
                <el-table-column prop="carInspectionPerson" align="center" show-overflow-tooltip min-width="120"
                                 label="车管负责人">
                </el-table-column>
                <el-table-column prop="priceType" align="center" show-overflow-tooltip min-width="100" label="费用类型">
                  <template #default="{row}">
                    <span>车管报销</span>
                  </template>
                </el-table-column>
                <el-table-column prop="inspectionIdenUrl" align="center" show-overflow-tooltip min-width="120"
                                 label="年检标识">
                  <template #default="{row}">
                    <el-popover placement="right"
                                v-if="row.inspectionIdenUrl"
                                trigger="click">
                      <image-common v-model="row.inspectionIdenUrl" :disabled="true" :up-type="2"/>
                      <el-button type="text" slot="reference">查看</el-button>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column prop="inspectionInvoiceUrl" align="center" show-overflow-tooltip min-width="120"
                                 label="年检发票">
                  <template #default="{row}">
                    <el-popover placement="right"
                                v-if="row.inspectionInvoiceUrl"
                                trigger="click">
                      <image-common v-model="row.inspectionInvoiceUrl" :disabled="true" :up-type="2"/>
                      <el-button type="text" slot="reference">查看</el-button>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column prop="updateTime" show-overflow-tooltip min-width="100" label="记录时间">
                  <template slot-scope="{row}">
                    {{ row.updateTime ? $dayjs(row.updateTime).format('YYYY-MM-DD') : '' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import {getDetails, recordList} from "@/api/zcwh/njglApi.js";
import {getInspectionMessage} from "@/api/zcwh/vehicleTabs.js";

export default {
  name: "inspectAnnuallyDetails",
  dicts: ["car_business_type", "insurance_status","car_nature",
    "contract_type", "car_type", 'online_offline',"fuel_type"],
  components: {},
  data() {
    return {
      isForm: false,
      routeQuery: {},
      activeName: "njxx",
      detailForm: {},
      form: {},
      tableData: [],
    };
  },
  watch: {},
  computed: {
    handlPriceType() {
      return function (val) {
        let obj = {
          1: '年检费',
          2: '年检代办费',
          3: '综合检测',
          4: '二维费用',
        };
        return obj[val];
      };
    },
    selectDictLabel() {
      return (arr, type) => {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  created() {
    if(this.$route.query.id){
      this.getDetails(this.$route.query.id);
    }
  },
  methods: {
    handleRoute(row){
      this.activeName = "njxx"
      this.getDetails(row.id);
    },

    pageReturn() {
      this.$tab.closePage().then(({visitedViews}) => {
        this.$router.push({
          path: "/clgl/inspectAnnuallyList",
        });
      });
    },

    handleClick(tab, event) {
      if (this.activeName === "njjl") {
        this.handleList();
      }
    },
    getDetails(id) {
      getDetails(id).then((res) => {
        if (res.code === 200) {
          this.detailForm = res.data || {};

          this.isForm = true;
        }
      });
    },

    async handleList() {
      this.loading = true;
      try {
        const res = await getInspectionMessage({carId: this.detailForm.carId});
        this.tableData = res.vo || [];
        this.form = res || {}
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.box-card {
  font-size: 14px;
  margin-bottom: 20px;

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 140px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    img {
      display: block;
      width: 200px;
      height: 160px;
    }

    .top-card-right {
      flex: 1;
      margin-left: 20px;
      font-size: 14px;
      line-height: 36px;
    }
  }
}

.el-form {
  ::v-deep.el-form-item {
    display: flex;
  }

  ::v-deep .el-form-item {
    margin-bottom: 12px;
  }

  ::v-deep.el-form-item__content {
    line-height: normal;
    flex: 1;
    margin-left: 0 !important;
  }

  ::v-deep.el-form-item__label {
    line-height: normal;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #646464;
  }
}
</style>
